<template>
  <view class="icon_background">
    <!-- <text class="icon_sym icon-baocun"> </text> -->
    <text
      class="icon_sym"
      v-for="(item, index) in tabs"
      :key="index"
      :class="item"
      @click="click_index(index)"
    ></text>
  </view>
  <view class="hr"></view>
  <!-- <text @click="icon_click" :class="['icon_sym', icon_css]"> </text> -->
  <!-- <text class="icon_sym icon_sym-gengduo"> </text> -->
</template>

<script setup>
import { ref } from 'vue'


const selectedIndex = ref(-1)

const tabs = ['icon-pachong', 'icon-tianjia', 'icon-daochu']

const props = defineProps({
  icon_css: {
    type: String,
    default: '',
  },
})

const click_index = (index) => {
  selectedIndex.value = index
}
// const get_click_index = () => selectedIndex.value
function get_click_index() {
  let a = selectedIndex.value
  selectedIndex.value = -1
  // console.log('test')
  return a
}

defineExpose({ get_click_index })
</script>

<style>
	@import "../../static/icon.css";
.hr {
  height: 1px; /* 分割线高度 */
  background-color: #f0a682; /* 分割线颜色 */
  margin: 10px 0; /* 上下间距 */
}
.icon_background {
  display: flex;
  justify-content: flex-end;
  /* background-color: red; */
  padding-top: 20px;
  margin-right: 20px;
}
.icon_sym {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  margin-left: 20px;
  /* padding: 40px; */
}
text:active {
  background-color: #ddd;
}
</style>
